<template>
  <div class="newindex-mian">
    <div class="kys-madestyle-body">
      <div class="kys-madestyle-swiper common-clearboth">
        <div class="kys-madestyle-swiper-left">
          <main class="banner">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item
                v-for="item in pageData.bannerList"
                :key="item.advertImgID"
              >
                <nuxt-link to="/">
                  <img alt="" :src="item.imgAddr | imgCache(1000, 0)" />
                </nuxt-link>
              </el-carousel-item>
            </el-carousel>
          </main>
        </div>
        <div class="kys-madestyle-swiper-right kys-madestyle-hover"
             style="border: 1px solid #e7e7e7;">
          <div class="layui-form" >
<!--            <input class="kys-loginname layui-input" type="text" name="username" required=""-->
<!--                   lay-verify="required"      v-model="login" placeholder="请输入用户名" autocomplete="off">-->
<!--            <input class="kys-loginpwd layui-input" type="password" name="password" required=""-->
<!--                   lay-verify="required"  v-model="password" placeholder="请输入密码" autocomplete="off">-->
<!--            <el-input-->
<!--              v-model="login"-->
<!--              placeholder="请输入用户名或手机号4"-->
<!--            ></el-input>-->
<!--            <el-input-->
<!--              v-model="password"-->
<!--              type="password"-->
<!--              placeholder="请输入密码"-->
<!--            ></el-input>-->
<!--            <div class="kys-loginbtns">-->
<!--              <button type="primary" style="background: cornflowerblue" class="layui-btn layui-btn-primary" @click="doLogin">登录</button>-->
<!--              <a href="/register" class="layui-btn layui-btn-primary">注册</a>-->
<!--            </div>-->
            <input class="kys-loginname layui-input" type="text" name="username" required=""
                   lay-verify="required" placeholder="请输入用户名"  v-model="login" autocomplete="off">
            <input class="kys-loginpwd layui-input" type="password" name="password" required=""
                   lay-verify="required" placeholder="请输入密码" autocomplete="off"  v-model="password">
            <div class="kys-loginbtns">
              <button class="layui-btn" lay-submit="" lay-filter="login" @click="doLogin">登录</button>
              <nuxt-link to="/register4" class="layui-btn layui-btn-primary">注册</nuxt-link>
            </div>
            <p class="kys-loginbtns-forget">
              <nuxt-link to="/forget4">忘记密码？</nuxt-link>
            </p>
            <div class="kys-loginbtns-logins">
              <a :href="pageData.qq" target="_blank" ref="nofollow" class="qqlogin" >
              </a>
              <a :href="pageData.wx" target="_blank" ref="nofollow" class="wxlogin">
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="kys-madestyle-news common-clearboth">
        <div class="kys-madestyle-news-left kys-madestyle-hover">
          <div class="kys-madestyle-news-left-header"> 系统公告
            <nuxt-link to="/notice4/-1">MORE &gt;</nuxt-link>
          </div>
          <div class="kys-madestyle-news-left-body">
            <ul>
              <li
                v-for="item in pageData.noticeList"
                :key="item.systemNoticeID"
              >
                <nuxt-link
                  :style="`color: ${item.color}`"
                  :to="`/notice4/${item.systemNoticeID}`"
                > {{ item.systemNoticeTitle }}
                  <i>{{ timeFormat(item.createTime) }}</i>
                </nuxt-link>
              </li>

            </ul>
          </div>
        </div>
        <div class="kys-madestyle-news-right kys-madestyle-hover">
          <div class="kys-madestyle-news-right-header"><h2>联系客服</h2></div>
          <div class="kys-madestyle-news-right-body">
            <div class="kys-contact-item">
              <p>客服 咨询 QQ：
                <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontServicePhone}&site=qq&menu=yes`"></a>
              </p>
            </div>
            <div class="kys-contact-item">
              <p>售前 业务 QQ：
                <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontWorkPhone}&site=qq&menu=yes`"></a>
              </p>
            </div>
            <div class="kys-contact-item">
              <p>财务 加款 QQ：
                <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontMoneyPhone}&site=qq&menu=yes`"></a>
              </p>
            </div>
            <div class="kys-contact-item">
              <p>Q Q 群 号 码&nbsp;&nbsp;：
                <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontMoneyPhone}&site=qq&menu=yes`"></a>
              </p>
            </div>
          </div>
        </div>



      </div>
      <div class="key-madestyle-links">
        <div class="kys-madestyle-news-left-header">友情链接</div>
        <div class="new1-madestyle-links-body common-clearboth">
   				<a
            style="border:none"
            v-for="item in pageData.friends"
            :key="item.friendLinkID"
            :href="item.friendLinkAddr"
            rel="nofollow">
           <img src="http://img.sukatong.com/Uploads/Attachment/2021-01-30/6015187c3d072.png" alt="速卡通">
            <span>{{ item.friendLinkName }}</span>
          </a>
        </div>
      </div>
    </div>
    <!-- <qqservice :qq-link="systemStyle.qqLink" :qun-link="systemStyle.qunLink" /> -->

  </div>

</template>

<script>
import { mapState } from 'vuex'
import fixupMixin from '@/mixins/fixup'
import webHeader2 from './webHeader4'
import webFooter2 from './webFooter4'
import getPlatform, { platformMeta } from '@/common/platform'
import site from '@/middleware/site'
import { detectBroswer } from '@/common/utils'

export default {
  mixins: [fixupMixin],
  props: {
    pageData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      login: '',
      password: '',
      _pageData: {},
    }
  },
  computed: {
    ...mapState({
      site: (state) => state.site,
      systemStyle: (state) => state.systemStyle,
      platform: (state) => state.platform,
    })
  },
  async created() {
    if(this.pageData) return
    if (this.platform === 'web') {
      // 联系我们
      this._pageData.contact = {}
      const a = await this.$axios.get('/site/onlineService/getFK')
      if (a.code === 1001 && a.body) {
        this._pageData.contact = a.body
      }
      // 系统公告
      const b = await this.$axios.post('/site/systemNotice/pageFK', null, {
        params: {
          pageNum: 1,
          pageSize: 16
        }
      })
      this._pageData.noticeList = []
      if (b.code === 1001 && b.body) {
        this._pageData.noticeList = b.body.records
      }
      // 支付方式
      const c = await this.$axios.get('/finance/rechargeMode/getListForClient', {
        params: {
          rechargeType: 1
        }
      })
      this._pageData.chargeList = []
      if (c.code === 1001 && c.body) {
        this._pageData.chargeList = c.body.slice(0, 3)
      }
      // 友情链接
      const d = await this.$axios.get('/site/friendLink/friendLinkList')
      console.log("friend", d)
      this._pageData.friends = []
      if (d.code === 1001 && d.body) {
        this._pageData.friends = d.body
      }
      // 站点广告图
      const e = await this.$axios.get('/site/advertimg/advertimgList')
      this._pageData.bannerList = []
      if (e.code === 1001 && e.body) {
        // console.log(e.body)
        this._pageData.bannerList = e.body
      }
      // qq互联
      const f = await this.$axios.get('/user/qqConfig/getLoginUrl')
      if (f.code === 1001 && f.body) {
        this._pageData.qq = f.body
      }
      this._pageData.wx = ''
    }
    this.pageData = this._pageData
  },
  mounted() {

    if (this.systemStyle.isQun == 1) {
      const iframe = document.createElement('iframe')
      iframe.src = this.systemStyle.qunLink + '?' + new Date().getTime()
      iframe.id = 'iframe'
      iframe.style = 'display:none'
      document.body.appendChild(iframe)
      setTimeout(function () {
        const a = document.getElementById('iframe')
        document.body.removeChild(a)
      }, 60000)
    }
    window.addEventListener('keydown', (event) => {
      const e = event || window.event
      if (e.keyCode === 13) {
        this.doLogin()
      }
    })
  },
  methods: {
    timeFormat(time) {
      return /(?<=-)\d{1,2}-\d{1,2}/g.exec(time)[0]
    },
    showMoreBaiduA(e){
      console.log(e);
    },
    showMsgFromChild(d){
      const h = this.$createElement;
      let This = this;

      setTimeout(function(){
        document.getElementsByClassName('el-message-box__content')[0].innerHTML = "";
        document.getElementsByClassName('el-message-box__content')[0].appendChild(This.$refs.mesBoxCon);
      },50)
      this.$msgbox({
        title: '注册',
        message: h("div",null,""),
        showCancelButton: false,
        showConfirmButton: false,
        beforeClose: (action, instance, done) => {
          setTimeout(function(){This.$refs.innerMes.appendChild(This.$refs.mesBoxCon)},100)

          done();
        }
      }).catch(()=>{
        new Error("弹窗错误")
      });
    },
    async doLogin() {
      const res = await this.$axios.post('/login/login/login', null, {
        params: {
          login: this.login,
          password: this.password
        },
        tokenUpdate: true
      })
      if (res.code === 1001) {
        await this.$store.dispatch('getUserExtend')
        console.log(this.systemStyle.goPage);
        if(this.systemStyle.goPage == null || this.systemStyle.goPage == 0){
          this.$router.push('/category-list4')
        }else{
          this.$router.push('/category-list4')
        }
      }
    },
  },
  components: {
  }
}
</script>

<style scoped>
/*madestyle3*/
.kys-madestyle-headerbox{position:relative;width:100%;height:90px;background:white;  border-bottom: 2px solid #2495e3;}
.kys-madestyle-header{position:relative;width:1160px;height:100%;background:white;margin:0 auto;}
.kys-madestyle-body{position:relative;width:1200px;margin:0 auto;}
.kys-madestyle-logo{position:relative;width:180px;height:60px;margin-left:0;margin-top:15px;float:left;}
.kys-madestyle-header ul{width:500px;display:flex;flex-direction: row;justify-content: center;align-items: center;height:90px;}
.kys-madestyle-header ul li{position:relative;line-height:60px;margin:0 20px; letter-spacing: 2px;}
.kys-madestyle-header ul li a{color:#7f7f7f;}
.kys-madestyle-header ul li a.kys-madestyle-header-active{color:#2495e3;}
.kys-madestyle-header ul li a.kys-madestyle-header-active::after{position:absolute;content:'';bottom:10px; width:50px;left:50%;margin-left:-27px; height:2px;background: #2495e3;}
.kys-madestyle-search{position:absolute;right:0;top:25px;}
.kys-madestyle-search .layui-input-inline{float:left;}
.kys-madestyle-search .layui-select-title input{border-radius:2px 0 0 2px;border-right:none;}
.kys-madestyle-body{position:relative;width:1160px;padding:20px 0;margin:0 auto;}
.kys-madestyle-swiper{width:100%;position:relative;}
/*轮播图宽度*/
.kys-madestyle-swiper-left{position:relative;width:850px;height:315px;float:left;}
.kys-madestyle-swiper-left a,.kys-madestyle-swiper-left img{display:block;width:100%;height:100%;}
.kys-madestyle-swiper-right{position:relative;width:300px;height:315px;float:right;right:0;top:0;background:#f9f9f9;transition:0.5s;padding:20px;box-sizing:border-box;}
.kys-madestyle-swiper-right:hover{background:#f1f1f1;}
.kys-madestyle-swiper-right input{height:40px !important;line-height:40px;margin-bottom:15px;padding-left:44px;box-sizing:border-box;}
.kys-loginname{background: #fff0 url(~assets/images/icon_user01.png) no-repeat 10px center;}
.kys-loginpwd{background: #fff0 url(~assets/images/icon_user02.png) no-repeat 10px center;}
.kys-loginbtns .layui-btn{width:45%;height:35px;line-height:35px;}
.kys-loginbtns .layui-btn+.layui-btn{margin-left:8%;}
.kys-loginbtns .layui-btn:nth-last-child(1):hover{border-color:#0099ff;}
.kys-loginbtns-forget{margin-top:15px;}
.kys-loginbtns-forget a{display:inline-block;line-height:25px;color:#aaa;font-size:12px;}
.kys-loginbtns-logins{border-top:1px solid #e7e7e7;padding-top:20px;margin-top:20px;}
.kys-loginbtns-logins a{display:inline-block;width:37px;height:36px;transition: all .8s linear;}
.kys-loginbtns-logins a.qqlogin{background: url(~assets/images/lg_onekey.png) left center no-repeat;}
.kys-loginbtns-logins a.wxlogin{background: url(~assets/images/lg_onekey.png) left center no-repeat;margin-left:15px;background-position: -54px center;}
.kys-loginbtns-logins a:hover{transform:rotate(360deg);}
.kys-madestyle-news{margin-top:20px;}
.kys-madestyle-news-left{width:825px;height:380px;border:1px solid #e7e7e7;box-sizing:border-box;padding:0 20px;float:left;}
.kys-madestyle-hover{transition:0.5s;}
.kys-madestyle-hover:hover{background:#f7f7f7;}
.kys-madestyle-news-left-header{margin-bottom: 0px;position:relative;line-height:80px;font-size:18px;color:#2495e3;font-weight:bold;padding-left:20px;border-bottom:1px solid #e7e7e7;}
.kys-madestyle-news-left-header::before{position:absolute;content:'';left:0;top:30px;width:3px;height:20px;background:#2495e3;}
.kys-madestyle-news-left-header a {color:#a2a2a2;font-size:14px;float:right;font-weight:normal;}
.kys-madestyle-news-left-body{padding-top:15px;}
.kys-madestyle-news-left-body ul li{position:relative;width:100%;padding-right:120px;box-sizing:border-box;margin-bottom:12px;transition:0.5s;}
.kys-madestyle-news-left-body ul li:hover{padding-left:15px;}
.kys-madestyle-news-left-body ul li:nth-last-child(1){margin-bottom:0;}
.kys-madestyle-news-left-body ul li a{padding-left: 24px;display: inline-block;background: url(~/assets/images/right_arrow.png) no-repeat left center;transition: all .3s linear;font-size:14px;line-height:20px;width:100%;white-space: nowrap;overflow:hidden;    text-overflow: ellipsis;box-sizing:border-box;}
.kys-madestyle-news-left-body ul li i{position:absolute;right:0;font-style:normal;color:#979797;font-size:12px;line-height:20px;top:0;}
.kys-madestyle-news-right{position:relative;float:right;right:0;top:0;width:300px;height:380px;border:1px solid #e7e7e7;box-sizing:border-box;}
.kys-madestyle-news-right-header{position:relative;padding:0 20px;box-sizing:border-box;}
.kys-madestyle-news-right-header h2{line-height:80px;font-size:18px;text-align:center;color:#fff;font-weight:bold;border-bottom:1px solid #e7e7e7;}
.kys-madestyle-news-right-body{position:relative;padding:20px 20px 0;box-sizing:border-box;border-bottom:1px solid #e7e7e7;}
.kys-contact-item{margin-bottom:15px;}
.kys-contact-item p{font-size:12px;color:#838383;position:relative;line-height:25px;}
.kys-contact-item p a{position:absolute;right:0;top:0;width:77px;height:22px; background:url(~/assets/qq.png) no-repeat;}
.key-madestyle-links{position:relative;border:1px solid #e7e7e7;margin-top:20px;padding:0 20px;}
.kys-madestyle-links-body{margin-top: -20px;position:relative;width:100%;padding:5px 0;box-sizing:border-box;}
.kys-madestyle-links-body a{display:inline-block;float:left;border:1px solid #e7e7e7;margin-right:15px;}
.kys-madestyle-links-body img{width:85px;height:40px;transition:0.3s;}
.kys-madestyle-links-body a:hover img{transform:scale(1.05);}
.kys-madestyle-footer{position:relative;width:100%;padding:35px 0;background:#373d44;}
.kys-madestyle-footer p{text-align:center;color:#fff;font-size:12px;}
.kyx-jubao img{display:block;margin:20px auto;}
.kys-madestyle-footer p a{color:#fff;margin:0 2px;}
.kys-madestyle-searchbtn{position:relative;height:31px;line-height:31px;margin-left:-1px;}

</style>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style1/common.css';
// @import 'assets/style/style1/openlogin.css';
// @import 'assets/style/style1/style.css';
// @import 'assets/style/style1/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

.newindex-mian {
  background-color: #fff;
  margin: 0 auto;
}
.kys-madestyle-body {
  background-color: #fff;
}
.kys-madestyle-news-left {
  width: 850px;
}
.kys-madestyle-news-right-header h2 {
  background: unset;
  color: #2495e3;
}
.kys-contact-item {
  position: relative;
  a {
    position: absolute;
    right: 0;
    top: 0;
    width: 77px;
    height: 22px;
    background: url('http://baota.66skt.cn/Public/Front/xinmeng/images/qq.png') no-repeat !important;
  }
}
.kys-madestyle-links-body {
  margin-top: 0;
  padding: 30px 0;
}
.new1-madestyle-links-body {
  flex-wrap: wrap;
  display: flex;
  padding: 30px 0;
  a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
    font-size: 12px;
    margin-bottom: 10px;
    img {
      border: 1px solid #e7e7e7;
      width: 85px;
      height: 40px;
      transition: 0.3s;
      margin-bottom: 5px;
    }
  }
}
</style>
<style lang="scss">
.newindex-mian .el-carousel__container {
  height:315px;
}
</style>
